
import React, { Component } from 'react';
import logo from './logo.svg';

import './App.css';
import './style/public.css';
import { Layout, Button } from 'antd';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
const {
  Header, Footer, Sider, Content,
} = Layout;

const Index = () => <div>
  <Blog posts={posts} />
  <Button type="primary">Primary</Button>
  <Button>Default</Button>
</div>;
const About = () => <h2>关于我们</h2>;
const Plan = () => <h2>工作计划</h2>;
const Manage = () => <ul>
  <GetManageList posts={posts}/>
</ul>;
const Message = () => <h2>地盘动态</h2>;

const AppRouter = () => (
    <Router>
      <div>
        <nav>
          <ul className='header_ul'>
            <li>
              <Link to="/">首页</Link>
            </li>
            <li>
              <Link to="/manage">管理列表</Link>
            </li>
            <li>
              <Link to="/message/">地盘动态</Link>
            </li>
            <li>
              <Link to="/plan/">工作计划</Link>
            </li>
            <li>
              <Link to="/about/">关于我们</Link>
            </li>
          </ul>
        </nav>
        <Route path="/" exact component={Index} />
        <Route path="/about/" component={About} />
        <Route path="/plan/" component={Plan} />
        <Route path="/manage/" component={Manage} />
        <Route path="/message/" component={Message} />
      </div>
    </Router>
);


class App extends Component {
  render() {
    return (
      <div className="App">
        <Layout>
          <Sider>
              <AppRouter/>
          </Sider>
          <Layout>
            <Header>
              <header className="">
                <div className='header_content'>
                  <img src={logo} className="App-logo" alt="logo" />
                  <span className='logo-text'>我的地盘</span>
                </div>
              </header>
            </Header>
            <Content>
              <AppRouter/>
            </Content>
            <Footer>Footer</Footer>
          </Layout>
        </Layout>
        <div className='content-h'>
          <div className='pop hide'>
            {/*第一种加载样式*/}
            <div className='loading-con'>
              <div className='load-dian dian1'></div>
              <div className='load-dian dian2'></div>
              <div className='load-dian dian3'></div>
              <div className='load-dian dian4'></div>
              <div className='load-dian dian5'></div>
              <div className='text-loading'>加载中</div>
            </div>
            {/*第二种加载样式*/}
            <div className='loading-con-o'>
              <div className='load-item load-item-1'></div>
              <div className='load-item load-item-2'></div>
              <div className='load-item load-item-3'></div>
              <div className='load-item load-item-4'></div>
              <div className='load-item load-item-5'></div>
              <div className='load-item load-item-6'></div>
              <div className='load-item load-item-7'></div>
              <div className='load-item load-item-8'></div>
              <div className='load-item load-item-9'></div>
              <div className='load-item load-item-10'></div>
              <div className='load-item load-item-11'></div>
              <div className='load-item load-item-12'></div>
              <div className='text-loading'>加载中</div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

const posts = {
  con:[{id: 1, title: '你好！', content: '欢迎学习react！'},
    {id: 2, title: '安装', content: '安装react.'}],
  title:[{id:1,content:'react学习'}],
  list:[
    {datetime: '2019-02', name: "正式提交方案", status: '非常重要', id: 1},
    {datetime: '2018-12', name: "形成文件", status: '重要', id: 2},
    {datetime: '2018-03', name: "收集材料", status: '重要', id: 3},
    {datetime: '2017-11', name: "共同商讨定夺", status: '随时间定夺', id: 4},
    {datetime: '2017-02', name: "列出方案提纲", status: '一般重要', id: 5}]
};

function Blog(props) {
  const sidebar = (
      <ul>
        {props.posts.title.map((post) =>
            <li key={post.id}>
              {post.content}
            </li>
        )}
      </ul>
  );
  const content = props.posts.con.map((post) =>
      <div key={post.id}>
        <h3>{post.title}</h3>
        <p>{post.content}</p>
      </div>
  );
  return (
      <div>
        {sidebar}
        <hr />
        {content}
      </div>
  );
}

function GetManageList(props) {
  const sidebar = (
      <ul>
        {props.posts.list.map((post) =>
            <li key={post.id} className='list_ul m_l_16 m_r_16'>
              <span>{post.datetime}</span>
              <span className='m_l_20 w_40'>{post.name}</span>
              <span className='m_l_20'>{post.status}</span>
            </li>
        )}
      </ul>
  );
  return (
      <div>
        {sidebar}
      </div>
  );
}


export default App;
